<template>
	<div :class="['widgets-home', customizing ? 'customizing' : '']" ref="main">
		<div class="widgets-content">
			<el-form :model="form" :rules="rules" ref="dialogForm" :disabled="mode == 'show'" label-width="110px" label-position="top">
				<el-row :gutter="1">
					<el-col :span="24">
                        <div class="titleBox">
                            {{mode=='show'?'查看工序':mode == 'edit'?'编辑工序':'新增工序'}}
                            <div>
                                <el-button type="primary" @click="submit" :disabled="mode == 'show'">保存</el-button>
                                <!-- <el-button type="primary" @click="submit" :disabled="mode == 'show'">保存并新增</el-button>
                                <el-button type="primary" @click="submit" :disabled="mode == 'show'">审核</el-button>
                                <el-button type="danger" @click="submit" :disabled="mode == 'show'">退出</el-button> -->
                            </div>
                        </div>
					</el-col>
				</el-row>
                <!-- 基本信息 -->
				<el-card class="box-card">
					<el-row :gutter="1">
						<el-col :span="24">
							<div class="titleBox titleBox1">
								基本信息
							</div>
						</el-col>
					</el-row>
					<el-row :gutter="1">
						<el-col :xs="24" :sm="3">
							<el-form-item label="工序编号" prop="work_code">
								<el-input v-model="form.work_code" placeholder="请输入(不填写自动生成)" clearable></el-input>
							</el-form-item>
						</el-col>
						<el-col :xs="24" :sm="3">
							<el-form-item label="名称" prop="work_name">
								<el-input v-model="form.work_name" placeholder="请输入" clearable></el-input>
							</el-form-item>
						</el-col>
						<el-col :xs="24" :sm="3">
                            <el-form-item label="分类" prop="cate_id">
                                <el-select v-model="form.cate_id" placeholder="请选择分类" style="width:100%" clearable filterable>
                                    <el-option v-for="item in cateList" :key="item.id" :label="item.cate_name" :value="item.id"/>
                                </el-select>
							</el-form-item>
						</el-col>
                        <el-col :xs="24" :sm="3">
							<el-form-item label="报工权限" prop="work_power">
								<el-select v-model="form.work_power" style="width: 100%" clearable @change="powerChange">
                                    <el-option label="班组" :value="1"/>
                                    <el-option label="人员" :value="2"/>
								</el-select>
							</el-form-item>
						</el-col>
                        <el-col :xs="24" :sm="3">
							<el-form-item label="所属组织" prop="org_id">
								<el-select v-model="form.org_id"  filterable style="width: 100%" placeholder="请选择所属组织" clearable @change="orgChange">
                                    <el-option v-for="item in orgList" :key="item.id" :label="item.title" :value="item.id"/>
                                </el-select>
							</el-form-item>
						</el-col>
						<el-col :xs="24" :sm="3">
							<el-form-item label="报工班组" prop="work_team_id">
								<el-select v-model="form.work_team_id" style="width: 100%" clearable filterable :disabled="form.work_power == 2">
                                    <el-option v-for="item in deptList" :key="item.id" :label="item.name" :value="item.id"/>
								</el-select>
							</el-form-item>
						</el-col>
						<el-col :xs="24" :sm="3">
							<el-form-item label="报工人员" prop="work_suff_id">
								<el-select v-model="form.work_suff_id" style="width: 100%" clearable filterable multiple collapse-tags collapse-tags-tooltip :disabled="form.work_power == 1">
									<el-option v-for="item in humList" :key="item.id" :label="item.name" :value="item.id"/>
								</el-select>
							</el-form-item>
						</el-col>
                        <el-col :xs="24" :sm="3">
							<el-form-item label="加工车间" prop="work_shop">
								<el-input v-model="form.work_shop" placeholder="加工车间" clearable></el-input>
							</el-form-item>
						</el-col>
                        <el-col :xs="24" :sm="3">
							<el-form-item label="设备" prop="equipment_id">
								<el-input v-model="device_name" placeholder="请选择设备" readonly @click="checkDevice"></el-input>
							</el-form-item>
						</el-col>
						<el-col :xs="24" :sm="3">
							<el-form-item label="委外" prop="is_out">
								<el-switch v-model="form.is_out" :active-value="1" :inactive-value="0"></el-switch>
							</el-form-item>
						</el-col>
					</el-row>
					<el-row :gutter="1">
						<el-col :xs="24" :sm="15">
							<el-form-item label="备注" prop="remark">
								<el-input v-model="form.remark" type="textarea" placeholder="请输入" clearable></el-input>
							</el-form-item>
						</el-col>
					</el-row>
				</el-card>
                <!-- 工资信息 -->
				<el-card class="box-card">
					<el-row :gutter="1">
						<el-col :span="24">
							<div class="titleBox titleBox1">
								工资信息
							</div>
						</el-col>
					</el-row>
					<el-row :gutter="1">
						<el-col :xs="24" :sm="3">
							<el-form-item label="工资计价方式" prop="valuation_type">
								<el-select v-model="form.valuation_type" style="width: 100%" clearable filterable>
									<el-option label="计时" :value="0" />
									<el-option label="计件" :value="1" />
								</el-select>
							</el-form-item>
						</el-col>
						<el-col :xs="24" :sm="3">
							<el-form-item label="计件依据" prop="piece_type">
								<el-select v-model="form.piece_type" style="width: 100%" clearable filterable>
									<el-option label="完工数" :value="0" />
									<el-option label="报工数" :value="1" />
								</el-select>
							</el-form-item>
						</el-col>
						<el-col :xs="24" :sm="3" v-if="form.valuation_type == 1">
							<el-form-item label="工价-计件" prop="labor_piece">
								<el-input v-model="form.labor_piece" placeholder="请输入" clearable></el-input>
							</el-form-item>
						</el-col>
						<el-col :xs="24" :sm="3" v-if="form.valuation_type == 0">
							<el-form-item label="工价-计时" prop="labor_time">
								<el-input v-model="form.labor_time" placeholder="请输入" clearable></el-input>
							</el-form-item>
						</el-col>
					</el-row>
				</el-card>
                <!-- 质检信息 -->
				<el-card class="box-card">
					<el-row :gutter="1">
						<el-col :span="24">
							<div style="display: flex;">
								<div class="titleBox titleBox1">
									质检信息
								</div>
								<el-checkbox v-model="form.is_quality" style="margin-bottom: 20px;margin-left: 50px;">需要检验</el-checkbox>
							</div>
						</el-col>
					</el-row>
					<el-row :gutter="1">
						<el-col :xs="24" :sm="3">
							<el-form-item label="质检方式" prop="quaqty_type">
								<el-select v-model="form.quaqty_type" style="width: 100%" clearable filterable>
									<el-option label="抽检" :value="0" />
									<el-option label="全检" :value="1" />
								</el-select>
							</el-form-item>
						</el-col>
						<el-col :xs="24" :sm="3">
							<el-form-item label="抽检比例" prop="quaqty_rate">
								<el-input v-model="form.quaqty_rate" placeholder="请输入" clearable></el-input>
							</el-form-item>
						</el-col>
						<el-col :xs="24" :sm="3">
							<el-form-item label="质检方案" prop="quality_id">
								<div class="selectBox">
									<el-input v-model="quality_name" placeholder="请选择质检方案" clearable :readonly="true" class="input" @click="selectQuality"></el-input>
								</div>
							</el-form-item>
						</el-col>
                        <!-- <el-col :xs="24" :sm="3">
							<el-form-item label="不良品项" prop="rejects_all">
								<div class="selectBox">
                                    <el-select v-model="form.rejects_all" style="width: 100%" clearable filterable multiple collapse-tags placeholder="请选择不良品项">
                                        <el-option v-for="item in rejectsList" :key="item.id" :label="item.rejects_name" :value="item.id" />
                                    </el-select>
								</div>
							</el-form-item>
						</el-col>
						<el-col :xs="24" :sm="6">
							<el-form-item label="不良品原因" prop="rejects_resan">
								<el-input v-model="form.rejects_resan" placeholder="请输入" type="textarea" clearable></el-input>
							</el-form-item>
						</el-col> -->
					</el-row>
					<el-row :gutter="1">
						<el-col :xs="24" :sm="18">
							<el-form-item label="附件" prop="enclosure">
								<sc-upload-file v-model="form.enclosure" :limit="1">
									<el-button type="primary" icon="el-icon-upload">选择文件</el-button>
								</sc-upload-file>
							</el-form-item>
						</el-col>
					</el-row>
				</el-card>
                <!-- SOP指导书 -->
				<el-card class="box-card">
					<el-row :gutter="1">
						<el-col :span="24">
							<div class="titleBox titleBox1">
								SOP指导书
							</div>
						</el-col>
					</el-row>
					<el-row :gutter="1" class="box-card1">
						<el-col :xs="24" :sm="18">
							<el-form-item label=" " prop="sop" label-width="0">
								<sc-upload-file v-model="form.sop" :limit="1">
									<el-button type="primary" icon="el-icon-upload">选择文件</el-button>
								</sc-upload-file>
							</el-form-item>
						</el-col>
					</el-row>
				</el-card>
			</el-form>
		</div>
	</div>
    <!-- <reason-list v-if="dialog.save" ref="saveDialog" @success="reasonBack" @closed="dialog.save = false" draggable></reason-list> -->
    <option-list v-if="dialog.option" ref="optionDialog" @success="optionBack" @closed="dialog.option = false" draggable></option-list>
    <device-list v-if="dialog.device" ref="deviceDialog" @success="deviceBack" @closed="dialog.device = false" draggable></device-list>
</template>

<script>
import OptionList from '@/views/testing/option/optionList.vue'
// import ReasonList from '../reason/reasonList.vue'
import DeviceList from '@/views/device/deviceList.vue'

export default {
	name: '新增BOM',
	components: { OptionList, DeviceList},
	data() {
		return {
			dialog: {
                save: false,
                option: false,
                device: false,
			},
			//表单数据
			form: {
				id: "",
				work_code: "",
				work_group: "",
				cate_id: "",
				work_team_id: "",
				work_suff_id: "",
				is_out: 0,
				remark: "",
				valuation_type: 0,
				piece_type: "",
				labor_piece: "",
				labor_time: "",
                is_quality: "",
				quaqty_type: "",
				quaqty_rate: "",
				quality_id: "",
				rejects_resan: "",
				enclosure: "",
				work_name: "",
				sop: "",
				rejects_all: "",
                org_id: "",
                equipment_id: "",
                work_shop: ""
			},
            org_id: "",
			//验证规则
			rules: {
				cate_id: [{ required: true, message: '请选择工序分类' }],
				work_power: [{ required: true, message: '请选择报工权限' }],
			},
            cateList:[],
            orgList:[],
            deptList:[],
            humList:[],
            quality_name: "",
            rejectsList:[],
            mode: "",
            device_name: "",
		}
	},
	mounted() {
		this.getCate()
        this.getOrg()
        this.getRejects()
        this.getAdmin()
        if (this.$route.query.id) {
            this.setData()
            this.mode = this.$route.query.zhuangtai
        }
        
	},
	methods: {
		//表单注入数据
		async setData() {
			var reqData = {id: this.$route.query.id}
			var res = await this.$API.craft.craft.detail.post(reqData);
			this.form.id = this.$route.query.id
			this.form.work_code = res.data.work_code
			this.form.cate_id = res.data.cate_id
			this.form.work_group = res.data.work_group
			this.form.is_out = res.data.is_out
			this.form.remark = res.data.remark
			this.form.valuation_type = res.data.valuation_type
			this.form.piece_type = res.data.piece_type
			this.form.labor_piece = res.data.labor_piece
			this.form.labor_time = res.data.labor_time
			this.form.quaqty_type = res.data.quaqty_type
			this.form.quaqty_rate = res.data.quaqty_rate
			this.form.quality_id = res.data.quality_id
            this.quality_name = res.data.quality_name
			this.form.rejects_resan = res.data.rejects_resan
			this.form.enclosure = res.data.enclosure
			this.form.sop = res.data.sop
			this.form.work_shop = res.data.work_shop
            let reArr = []
            res.data.rejects_all&&res.data.rejects_all.map(item=>{
                reArr.push(Number(item))
            })
			this.form.rejects_all = reArr
			this.form.work_name = res.data.work_name
			this.form.is_quality = res.data.is_quality == 1?true:false
            this.form.work_power = res.data.work_power
			this.form.org_id = res.data.org_id
            this.orgChange(res.data.org_id)
            this.form.work_team_id = res.data.work_team_id
            this.form.work_suff_id = res.data.work_suff_id.map(item=>Number(item))
		},
		resetForm(formName) {
			this.$refs[formName].resetFields();
			this.quality_name = ''
		},
		//表单提交方法
		submit() {
            if(this.form.is_quality == true){
                this.form.is_quality = 1
            }else{
                this.form.is_quality = 0
            }
			this.$refs.dialogForm.validate(async (valid) => {
				if (valid) {
					this.isSaveing = true;
					var res = [];
					if (this.form.id) {
						res = await this.$API.craft.craft.edit.post(this.form);
					} else {
						res = await this.$API.craft.craft.add.post(this.form);
					}
					this.isSaveing = false;
					if (res.code == 1) {
						// this.$emit('success', this.form, this.mode)
						// this.visible = false;
						this.$message.success("操作成功")
						if (this.mode == '') {
							this.resetForm('dialogForm')
						} else {
							this.setData()
						}
					} else {
						this.$alert(res.message, "提示", {type: 'error'})
					}
				} else {
					return false;
				}
			})
		},
		dataFormChange() {
			this.totalCompute()
		},
        selectResan(){
            if(this.mode != 'show'){
                this.dialog.save = true
                this.$nextTick(() => {
                    this.$refs.saveDialog.open('add')
                })
            }
        },
        reasonBack(data){
            this.form.rejects_all = data[0].rejects_name
        },
        selectQuality(){
            if(this.mode != 'show'){
                this.dialog.option = true
                this.$nextTick(() => {
                    this.$refs.optionDialog.open('add')
                })
            }
        },
        optionBack(data){
            this.form.quality_id = data[0].id
            this.quality_name = data[0].quality_name
        },
        checkDevice(){
            if(this.mode != 'show'){
                this.dialog.device = true
                this.$nextTick(() => {
                    this.$refs.deviceDialog.open('add')
                })
            }
        },
        deviceBack(data){
            this.form.equipment_id = data[0].id
            this.device_name = data[0].title
        },
        // 获取分类
		async getCate(){
			var res = await this.$API.craft.craftCate.list.get();
			this.cateList = res.data
		},
        // 组织
        async getOrg(){
            var res = await this.$API.all.getOrg.get({is_page:0});
            this.orgList = res.data;
        },
        async getAdmin(){
            var res = await this.$API.all.getAdmin.get({is_page:0});
            this.humList = res.data
        },
        // 不良品项
        async getRejects(){
            var res = await this.$API.craft.rejects.all.get();
            this.rejectsList = res.data;
        },
        async orgChange(e){
            var res = await this.$API.all.getDep.get({is_page:0,org_id:e});
            this.deptList = res.data;
        },
        async deptChange(e){
            var res = await this.$API.all.getAdmin.get({is_page:0,dept_id:e});
            this.humList = res.data
        },
        powerChange(){
            this.form.work_suff_id = ''
            this.form.work_team_id = ''
        },
	}
}
</script>
<style>
.sc-upload-multiple[data-v-f680f9e4] .el-upload--picture-card {
	width: 60px;
	height: 60px;
}

[data-v-f680f9e4] .el-upload-list__item {
	width: 60px;
	height: 60px;
}
</style>
<style lang="scss">
.widgets-home {
	display: flex;
	flex-direction: row;
	flex: 1;
	min-height: 100%;
	max-height: 100%;
}

.widgets-content {
	flex: 1;
	overflow: auto;
	overflow-x: hidden;
	padding: 15px 15px;
	.selectBox {
		display: flex;
		align-items: center;
	}
	.el-col {
		margin-right: 20px;
	}
	.el-form-item {
		flex-direction: column;
		justify-content: flex-start;
		align-items: flex-start;
		.el-form-item__label {
			justify-content: flex-start;
		}
		.el-form-item__content {
			width: 100%;
		}
	}
	.box-card {
		margin-bottom: 10px;
	}
	.box-card1 {
		.el-form-item__label {
			justify-content: flex-start;
			height: 0;
		}
	}
	.box-card2 {
		.el-col {
			margin-right: 0;
		}
	}
	.el-form {
		//background: #ffffff;
		//padding: 20px;
		min-height: 90%;
		.titleBox {
			font-size: 18px;
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			color: #333333;
			padding-bottom: 10px;
			border-bottom: 1px solid #E6E6E6;
			margin-bottom: 14px;
			display: flex;
			align-items: center;
			justify-content: space-between;
		}
		.titleBox1 {
			font-weight: 600;
			border: none;
			font-size: 16px;
		}
	}
}

.customizing .widgets-wrapper {
	margin-right: -360px
}

.customizing .widgets-wrapper .el-col {
	padding-bottom: 15px;
}

.customizing .widgets-wrapper .draggable-box {
	border: 1px dashed var(--el-color-primary);
	padding: 15px;
}

.customizing .widgets-wrapper .no-widgets {
	display: none;
}

.customizing .widgets-item {
	position: relative;
	margin-bottom: 15px;
}

@media (max-width: 992px) {
	.customizing .widgets {
		transform: scale(1) !important;
	}

	.customizing .widgets-aside {
		width: 100%;
		position: absolute;
		top: 50%;
		right: 0;
		bottom: 0;
	}

	.customizing .widgets-wrapper {
		margin-right: 0;
	}
}
</style>
